<template>
    <!--商品详情页-->
    <div class="detail">
      <!--商品名称-->
      <product-param v-bind:title="product.name"></product-param>
      <div class="wrapper">
        <div class="container clearfix">
          <!--商品画册-->
          <div class="swiper">
              <swiper :options="swiperOption">
                  <swiper-slide v-for="(item, index) of albumPics" :key="index">
                      <img :src="item" alt="" style="width: 600px;height: 500px">
                  </swiper-slide>
                  <!-- <swiper-slide><img src="/imgs/detail/phone-2.jpg" alt=""></swiper-slide>
                    <swiper-slide><img src="/imgs/detail/phone-3.jpg" alt=""></swiper-slide>
                    <swiper-slide><img src="/imgs/detail/phone-4.jpg" alt=""></swiper-slide>   -->
                  <!-- Optional controls -->
                  <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
          </div>
          <!--画册右侧商品价格、sku等信息-->
          <div class="content">
            <!--商品名称-->
            <h2 class="item-title">{{ product.name }}</h2>
            <!--商品副标题-->
            <p class="item-info">{{ product.subTitle }}</p>
            <!--商品价格-->
            <div class="item-price">{{ product.price }}元</div>
            <div class="line"></div>
            <!--商品规格选择-->
            <div class="item-version clearfix">
              <h2>选择规格</h2>
              <div class="phone fr"
                  v-for="(item, index) of product.skuStockList"
                  :key="index"
                  :class="[{checked: clicked == index},{disabled: (item.stock-item.lockStock)<=0}]"
                  :skuId="item.id"
                  @click="handlerSkuid(item, index)">
                  {{ (item.sp1!=null?item.sp1:'') + (item.sp2!=null?item.sp2:'') + (item.sp3!=null?item.sp3:'') }}
              </div>
              <!-- <li
                class="box"
                v-for="(list, index) in dataList"
                :key="index"
                :class="{ bor: clicked == index }"
                @click="changeTab(index)"
              >
                {{ list }}
              </li> -->
              <!-- <div
                class="phone fl"
                :class="{ checked: version == 1 }"
                @click="version = 1"
              >
                6GB+64GB 全网通
              </div>
              <div
                class="phone fr"
                :class="{ checked: version == 2 }"
                @click="version = 2"
              >
                4GB+64GB 移动4G
              </div> -->
            </div>
            <!--商品总价格-->
            <div class="item-total">
                <div class="phone-info clearfix">
                    <div class="stock" v-if="clicked==null">
                      <i class="fa fa-exclamation-triangle f2" aria-hidden="true"></i>
                      请选择规格
                    </div>
                    <div class="fr" v-if="skuName" v-html="skuName"></div>
                </div>
                <div class="phone-total" v-if="skuPrice>0">总计：{{ skuPrice }}元</div>
            </div>
            <!--加入购物车、立即购买操作-->
            <div class="btn-group">
                <a href="javascript:;" class="btn btn-large fl" @click="addCart">加入购物车</a>
                <a href="javascript:;" class="btn btn-large btn-buy fl" @click="buyNow" >立即购买</a>
            </div>
            <!--商品对应的服务保证，对应的pms_product表字段是service_ids-->
            <div class="after-sale-info">
              <span>
                <a href="javascript:void(0);"
                  v-if="serviceIds.includes('1')"
                  class="support">
                  <i class="fa fa-check-circle-o f2" aria-hidden="true"></i>
                  <em>无忧退货</em>
                </a>
              </span>
              <span>
                <a href="javascript:void(0);"
                   v-if="serviceIds.includes('2')"
                   class="support">
                  <i class="fa fa-check-circle-o f2" aria-hidden="true"></i>
                  <em>快速退款</em>
                </a>
              </span>
              <span>
                <a href="javascript:void(0);"
                      v-if="serviceIds.includes('3')"
                      class="support">
                  <i class="fa fa-check-circle-o f2" aria-hidden="true"></i>
                  <em>免费包邮</em>
                </a>
              </span>
            </div>
          </div>
        </div>
      </div>
      <!--商品介绍-->
      <!--<div class="price-info">
        <div class="container">
          <h2>商品介绍</h2>
          &lt;!&ndash;商品属性&ndash;&gt;
          <div class="attributes">
              <ul class="attributes-list">
                  <li v-for="(item, index) in product.productAttributeValueList" :key="index">
                      {{ item.attrName }}:&nbsp;{{ item.value }}
                  </li>
              </ul>
          </div>
          &lt;!&ndash;商品详细描述html&ndash;&gt;
          <div class="desc" v-html="product.detailHtml">
            &lt;!&ndash; <img src="/imgs/detail/item-price.jpeg" alt=""> &ndash;&gt;
          </div>
        </div>
      </div>-->
    <div class="wrapper">
        <div class="container">
            <el-tabs @tab-click="handleClick" v-model="activeName" class="el-menu-demo" mode="horizontal">
                <!--商品信息-->
                <el-tab-pane name="productDetail">
                    <span slot="label"><i class="el-icon-bank-card"></i>商品详情</span>
                    <div class="price-info">
                        <div class="container">
                            <h2>商品介绍</h2>
                            <div class="attributes">
                                <ul class="attributes-list">
                                    <li v-for="(item, index) in product.productAttributeValueList" :key="index">
                                        <span style="font-size: 15px">{{ item.attrName }}:&nbsp;{{ item.value }}</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="desc" v-html="product.detailHtml">
                                &lt;!&ndash; <img src="/imgs/detail/item-price.jpeg" alt=""> &ndash;&gt;
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <!--商品评论-->
                <el-tab-pane name="productComment">
                    <span slot="label"><i class="el-icon-bank-card"></i>商品评价</span>
                    <div class="price-info" v-for="(item,index) in commentList" :key="index"  style="text-align: left">
                        <!--评论者信息-->
                        <div style="width: 100%;height: 70px;position: relative;display: flex">
                            <!--评论者头像-->
                            <div>
                                <img src="https://gjy-mall.oss-cn-shenzhen.aliyuncs.com/gjy-mall/images/20210922/moto.jpg"
                                     style="margin-top:10px;margin-left: 10px; width: 50px;height: 50px;border-radius: 50px"/>
                            </div>
                            <div style="margin-top: 20px;margin-left: 10px">
                                <!--评论者-->
                                <p>
                                    <span style="font-size: 13px;font-weight: bold;font-family:
                                    'Avenir', Helvetica,
                                Arial, sans-serif">{{item.memberNickName}}</span>
                                </p>
                                <span style="margin-top: 20px;font-weight: bold;color: #999999">规格：{{item.productAttribute}}</span>
                            </div>

                        </div>
                        <!--评论内容-->
                        <div style="width:700px;margin-top:15px;margin-left: 15px;">
                            <span style="font-weight: bold;font-size: 15px;">
                                {{item.content}}
                            </span>
                        </div>
                        <!--TODO 评论图片-->
                        <div style="width: 100%;height:100%;margin-left:20px;margin-top:20px;position: relative;display: flex">
                            <img style="width:100px;height: 100px;margin-right: 15px"
                                 src="https://gjy-mall.oss-cn-shenzhen.aliyuncs.com/gjy-mall/images/20210922/moto.jpg">
                            <img style="width:100px;height: 100px;margin-right: 15px"
                                 src="https://gjy-mall.oss-cn-shenzhen.aliyuncs.com/gjy-mall/images/20210922/moto.jpg">
                        </div>
                        <!--打赏星值、评论日期-->
                        <div style="width:100%;height: 50px;margin-left:15px; margin-top: 20px;text-align:left">
                            <el-rate
                                    v-model="item.star"
                                    disabled
                                    show-score
                                    text-color="#ff9900"
                                    score-template="{value}">
                            </el-rate>
                            <h4 style="margin-top: 10px">{{item.createTime|formatCreateTime}}</h4>
                        </div>
                    </div>
                    <el-divider></el-divider>
                    <no-comment v-if="loading"></no-comment>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

      <service-bar></service-bar>
    </div>
</template>
<script>
    import {swiper, swiperSlide} from "vue-awesome-swiper";
    import ProductParam from "./../components/ProductParam";
    import ServiceBar from "./../components/ServiceBar";
    import "swiper/dist/css/swiper.css";
    import {formatDate} from '@/util/date';
    import NoComment from './../components/NoComment'
    export default {
      name: "detail",
      data() {
        return {
          loading:false,
          commentList:[],
          activeName: 'productDetail',
          id: this.$route.params.id, //获取商品ID
          err: "",
          version: 1, //商品版本切换
          product: {}, //商品信息
          swiperOption: {
            autoplay: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
          },
          skuId: 0,
          albumPics: [],
          clicked: null,
          serviceIds: [],
          skuPrice: 0,
          skuName: '',
        };
      },
      components: {
        swiper,
        swiperSlide,
        ProductParam,
        NoComment,
        ServiceBar,
      },
      mounted() {
        this.getProductInfo();
      },
        filters:{
            formatCreateTime(time) {
                let date = new Date(time);
                return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
            },
        },
      methods: {
        handleClick(){
            if(this.activeName==="productComment"){
                this.axios.get(`/comment/list?pId=${this.product.id}`).then(response=>{
                    if(response.length===0){
                        this.loading=true;
                    }else{
                        this.commentList=response;
                    }
                })
            }
            window.console.log();
        },
        //获取商品详细信息
        getProductInfo() {
          this.axios.get(`/product/detail/${this.id}`).then((res) => {
            /*var newStockSku=[];
            //新数组
            res.skuStockList.unshift(newStockSku);*/
            this.product = res;
            //商品画册图片
            this.albumPics = res.albumPics.split(",");
            this.albumPics.unshift(res.pic);
            if (this.albumPics == null || this.albumPics == undefined || this.albumPics == ""){
                this.albumPics = res.pic.split(",");
            }
            //商品服务保证(从后端返回的是一个字符串，所以我们需要以逗号分割将其转换为数组)
            this.serviceIds = res.serviceIds.split(",");
          });
        },
        //加入购物车
        addCart() {
          if (this.skuId == null || this.skuId == undefined || this.skuId == "") {
              this.$message.warning("请选择一种规格");
              return;
          }

          this.axios
            .post("/car/add", {
                productId: this.id,
                productSkuId: this.skuId,
                quantity: 1,
            })
            .then(() => {
                this.$message.success({
                    dangerouslyUseHTMLString: true,
                    message: "添加购物车成功，请点击<a href='/*/cart'>购物车</a>查看"
                });
            });
        },
        //sku处理
        handlerSkuid(item, index) {
          //lockStock为锁定库存字段
          if ((item.stock - item.lockStock) <= 0) {
              this.$message.warning("库存不足，请选择其他规格");
              return;
          }
          //重复点击则失效
          if (this.clicked == index) {
              this.clicked = null;
              this.skuId = 0;
              //重新显示商品画册的图片
              this.albumPics = this.product.albumPics.split(",");
              //unshift方法为向数组的开头添加一个或多个元素
              this.albumPics.unshift(this.product.pic);
              //sku置初始值
              this.skuName = '';
              //sku值初始值
              this.skuPrice = 0;
          } else {
             //非重复点击
              this.clicked = index;
              this.skuId = item.id;
              //显示该规格下的商品信息，
              this.albumPics = [item.pic];
              this.skuName = this.product.name +'--'+ (item.sp1?item.sp1:'') + (item.sp2?item.sp2:'')+
                  (item.sp3?item.sp3:'') + "<br/>库存：" +
                  (item.stock -
                  item.lockStock)
              + this.product.unit /*+ "--" + item.id*/;
              this.skuPrice = item.price;
          }
        },
        //立即购买
        buyNow(){
            if (this.skuId == null || this.skuId == undefined || this.skuId == "") {
                this.$message.warning("请选择一种规格");
                return;
            }
            this.$router.push({path:'/order/confirm',query:{
                    type:1,
                    productId: this.id,
                    productSkuId: this.skuId,
                    quantity: 1}});
        }

      },
    };
</script>
<style lang="scss">
    @import "./../assets/scss/config.scss";
    @import "./../assets/scss/mixin.scss";

    .detail {
        .stock {
            margin-top: 15px;
            color: #7ECF68;
        }

        .wrapper {
            .swiper {
                float: left;
                width: 600px;
                height: 600px;
                margin-top: 5px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .content {
                float: right;
                width: 584px;
                height: auto;

                .item-title {
                    font-size: 28px;
                    padding-top: 30px;
                    padding-bottom: 16px;
                    height: 66px;
                }

                .item-info {
                    font-size: 14px;
                    height: 36px;
                }

                .delivery {
                    font-size: 16px;
                    color: #7ECF68;
                    margin-top: 26px;
                    margin-bottom: 14px;
                    height: 15px;
                }

                .item-price {
                    font-size: 20px;
                    color: #7ECF68;
                    height: 19px;

                    .del {
                        font-size: 16px;
                        color: #999999;
                        margin-left: 10px;
                        text-decoration: line-through;
                    }
                }

                .btn-group {
                    width: 100%;
                    height: 54px;
                }

                .after-sale-info {
                    margin: 20px 0px;

                    a {
                        display: inline-block;
                        margin-right: 55px;
                        line-height: 30px;
                        margin-bottom: 10px;
                        cursor: default;
                        white-space: nowrap;
                        color: #b0b0b0;
                    }

                    i {
                        font-size: 24px;
                        display: inline-block;
                        font-style: normal;
                        vertical-align: middle;
                    }

                    em {
                        font-style: normal;
                        display: inline-block;
                        margin-left: 2px;
                        vertical-align: middle;
                        font-size: 16px;
                    }
                }

                .line {
                    height: 0;
                    margin-top: 25px;
                    margin-bottom: 28px;
                    border-top: 1px solid #e5e5e5;
                }

                .item-addr {
                    height: 108px;
                    background-color: #fafafa;
                    border: 1px solid #e5e5e5;
                    box-sizing: border-box;
                    padding-top: 31px;
                    padding-left: 64px;
                    font-size: 14px;
                    line-height: 14px;
                    position: relative;

                    .icon-loc {
                        position: absolute;
                        top: 27px;
                        left: 34px;
                        @include bgImg(20px, 20px, "/imgs/detail/icon-loc.png");
                    }

                    .addr {
                        color: #666666;
                    }

                    .stock {
                        margin-top: 15px;
                        color: #7ECF68;
                    }
                }

                .item-version,
                .item-color {
                    margin-top: 30px;

                    h2 {
                        font-size: 18px;
                        margin-bottom: 20px;
                    }
                }

                .item-version,
                .item-color {
                    .phone {
                        width: 50%;
                        height: 50px;
                        line-height: 50px;
                        font-size: 16px;
                        color: #333333;
                        border: 1px solid #e5e5e5;
                        box-sizing: border-box;
                        text-align: center;
                        cursor: pointer;

                        span {
                            color: #666666;
                            margin-left: 15px;
                        }

                        .color {
                            display: inline-block;
                            width: 14px;
                            height: 14px;
                            background-color: #666666;
                        }

                        &.checked {
                            border: 1px solid #7ECF68;
                            color: #7ECF68;
                        }
                    }

                    .disabled {
                        color: #b0b0b0;
                        cursor: auto;
                    }
                }

                .item-total {
                    height: 110px;
                    background: #fafafa;
                    padding: 24px 33px 29px 30px;
                    font-size: 14px;
                    margin-top: 50px;
                    margin-bottom: 30px;
                    box-sizing: border-box;

                    .phone-total {
                        font-size: 24px;
                        color: #7ECF68;
                        margin-top: 18px;
                    }
                }
            }
        }

        .price-info {
            text-align: center;
            background-color: #f3f3f3;
            height: auto;

            h2 {
                font-size: 24px;
                color: #333333;
                padding-top: 38px;
                margin-bottom: 30px;
                border-bottom: 2px solid #7ECF68;
                line-height: 50px;
            }

            .attributes-list {
                width: 749px;
                display: block;
                clear: both;
                margin: 20px auto;
                min-height: 50px;
                text-align: left;

                li {
                    display: inline;
                    float: left;
                    width: 206px;
                    height: 24px;
                    margin-right: 20px;
                    overflow: hidden;
                    text-indent: 5px;
                    line-height: 24px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
</style>